<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.place_name" class="search-input" clearable placeholder="请输入场所名称"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.place_type" class="search-input" clearable placeholder="请输入场所类别"/>
                </FormItem>
                <!--<FormItem>
                    <Input v-model="searchObj.name" class="search-input" clearable placeholder="请输入联系人姓名"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.mobile" class="search-input" clearable placeholder="请输入联系电话"/>
                </FormItem>-->
                <FormItem>
                    <Input v-model="searchObj.area" class="search-input" clearable placeholder="请输入区、县（市）"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.street" class="search-input" clearable placeholder="请输入街道"/>
                </FormItem>
                <!--<FormItem>
                    <Input v-model="searchObj.place_address" class="search-input" clearable placeholder="请输入详细地址"/>
                </FormItem>-->
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
            </Form>
            <Divider/>
            <Form :model="searchObj" inline>
                <FormItem>
                    <DatePicker v-model="statsTime" type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="请选择统计时间段" style="width: 335px"></DatePicker>
                </FormItem>
                <FormItem>
                    <Button :loading="tempFlag" class="search-btn" type="primary" @click="statsAllAction">
                        <Icon type="ios-search"/>
                        统计
                    </Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="exportData">
                        <Icon type="ios-download-outline"/>
                        数据导出
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row type="flex" justify="center">
            <Col span="24">
                <Table ref="table" border :loading="tableLoading" :columns="tableColumns" :data="tableData"
                       @on-selection-change="tableSelectChange">
                    <template slot="action" slot-scope="{ row }">
                        <Button type="info" size="small" class="action-btn" @click="infoAction(row)">详细统计</Button>
                    </template>
                </Table>
            </Col>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                  @on-change="getPageNo"/>
        </Row>
        <br>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType"
                      :dataObj="modalData" @cancelOption="cancelOption" @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import {
  // updatePlaceURL,
  getPeopleList,
  getTotalCount
  // deletePlace,
  // getPlaceCount
} from '@/api/pass'
import { formatDate } from '@/components/dateFormat'
import OptionModal from './components/option-modal'

export default {
  components: { OptionModal },
  data () {
    return {
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalData: {},
      tableColumns: [
        {
          // type: 'selection',
          type: 'index',
          title: '序号',
          width: 70,
          // fixed: 'left',
          align: 'center'
        },
        {
          title: '场所名称',
          key: 'place_name',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '区、县（市）',
          key: 'area',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '街道',
          key: 'street',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '详细地址',
          key: 'place_address',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        // {
        //   title: '经度',
        //   key: 'lat',
        //   width: 100,
        //   align: 'center'
        // },
        // {
        //   title: '纬度',
        //   key: 'lan',
        //   width: 100,
        //   align: 'center'
        // },
        {
          title: '联系人姓名',
          width: 150,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '联系电话',
          width: 150,
          tooltip: true,
          key: 'mobile',
          align: 'center'
        },
        // {
        //   title: '二维码地址',
        //   width: 150,
        //   key: 'qr_code',
        //   tooltip: true,
        //   align: 'center'
        // },
        {
          title: '场所类别',
          width: 150,
          tooltip: true,
          key: 'place_type',
          align: 'center'
        },
        {
          title: '当日人次数量',
          minWidth: 150,
          tooltip: true,
          sortable: true,
          // key: 'statistics',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('span', {
                style: {
                  marginRight: '5px'
                }
              }, params.row.statistics)
              // h('Button', {
              //   props: {
              //     type: 'primary',
              //     size: 'small',
              //     ghost: true
              //   },
              //   style: {
              //     marginRight: '5px'
              //   },
              //   on: {
              //     click: () => {
              //       this.statsOneAction(params.row)
              //     }
              //   }
              // }, '查询【' + params.row.statistics + '】')
            ])
          }
        }
        // {
        //   title: '操作',
        //   minWidth: 200,
        //   fixed: 'right',
        //   slot: 'action',
        //   align: 'center'
        // }
      ],
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      },
      tempFlag: false,
      searchObj: {},
      statsTime: ''
    }
  },
  props: {},
  mounted () {
    this.init()
  },
  methods: {
    exportData () {
      this.$refs.table.exportCsv({
        filename: '场所列表'
      })
    },
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      this.modalShow = false
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    tableSelectChange (val) {
      this.selectData = val
    },
    initPage () {
      this.pageObj.pageNo = 1
      this.pageObj.pageSize = 20
    },
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        place_name: this.$common.xeUtils.trim(this.searchObj.place_name),
        name: this.$common.xeUtils.trim(this.searchObj.name),
        mobile: this.$common.xeUtils.trim(this.searchObj.mobile),
        area: this.$common.xeUtils.trim(this.searchObj.area),
        street: this.$common.xeUtils.trim(this.searchObj.street),
        // place_address: this.$common.xeUtils.trim(this.searchObj.place_address),
        place_type: this.$common.xeUtils.trim(this.searchObj.place_type)
      }
      let param = data || obj
      this.tableLoading = true
      getPeopleList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = data.data.results
          // 数据处理
          this.tableData.forEach(item => {
            item.statistics = '-'
          })
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    infoAction (row) {
      this.$router.push({
        name: 'placePeople',
        query: { id: row.id }
      })
    },
    searchAction () {
      this.initPage()
      this.init()
    },
    async statsAllAction () {
      const startTime = this.statsTime[0] !== '' ? formatDate(this.statsTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
      const endTime = this.statsTime[1] !== '' ? formatDate(this.statsTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
      if (startTime !== '' && endTime !== '') {
        // console.log('统计', this.statsTime)
        // console.log('开始时间', startTime)
        // console.log('结束时间', endTime)
        this.tempFlag = true
        this.tableData.forEach(async (item, index) => {
          const param = {
            master_id: item.encryption,
            start_time: startTime,
            end_time: endTime
          }
          if (item.id) {
            let res = await getTotalCount(param)
            let data = res.data
            if (data.errcode === 200) {
              item.statistics = data.data
              // this.tempFlag = false
            } else {
              this.error(data)
            }
          }
          if (this.tableData.length === index + 1) {
            let dataTemp = this.$common.xeUtils.clone(this.tableData)
            this.tableData = []
            dataTemp.forEach(item => {
              this.tableData.push(item)
            })
            this.tempFlag = false
          }
        })
      } else {
        this.$Message.error('请选择统计时间段')
      }
    }
  }

}
</script>

<style scoped>
    .container {
        padding-bottom: 50px;
    }

    .action-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .search-input {
        /*width: 180px;*/
    }

    .search-btn {
        /*width: 100px;*/
    }

    /deep/ .ivu-divider-horizontal {
        margin: 12px 0;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 6px;
    }
</style>
